{% extends "vmServer/index_server.html" %}

{% block content %}
		<div class="col-xs-12">
			<h3 class="header smaller lighter blue">
			<i class="icon-hand-right icon-animated-hand-pointer blue"></i>
			{{ storage.pool_name }}存储池详情</h3>
			
                <div class="col-sm-4">
                    <div class="profile-user-info profile-user-info-striped">
                        <div class="profile-info-row">
                            <div class="profile-info-name"> 存储池名称 </div>

                            <div class="profile-info-value">
                                <span class="editable" >{{ storage.pool_name }}</span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 类型 </div>

                            <div class="profile-info-value">
                                <i class="icon-map-marker light-orange bigger-110"></i>
                                <span class="editable" >{{ storage.pool_type }}</span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 状态</div>

                            <div class="profile-info-value">
                                <span class="editable" >{{ storage.pool_active }}</span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 容量(GB) </div>

                            <div class="profile-info-value">
                                <span class="editable" >{{ storage.pool_size }}</span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 剩余容量(GB)</div>

                            <div class="profile-info-value">
                                <span class="editable" >{{ storage.pool_available}}</span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 使用率 </div>


                            <div class="profile-info-value ">
                                <span class="editable" >
                                    {% if storage.mem_per > 90  %}
                                        <div class="easy-pie-chart percentage" data-percent="{{ storage.pool_per }}" data-color="#D15B47">
                                            <span class="percent">{{ storage.pool_per }}</span>%
                                        </div>
                                    {% elif 70 < storage.pool_per and storage.pool_per < 90 %}
                                        <div class="easy-pie-chart percentage" data-percent="{{ storage.pool_per }}" data-color="#87CEEB">
                                            <span class="percent">{{ storage.pool_per }}</span>%
                                        </div>
                                    {% else %}
                                        <div class="easy-pie-chart percentage" data-percent="{{ storage.pool_per }}" data-color="#87B87F">
                                            <span class="percent">{{ storage.pool_per }}</span>%
                                        </div>
                                    {% endif %}
                                </span>
                            </div>

                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 存储路径 </div>
                            <div class="profile-info-value">
                                <span class="editable" >{{ storage.pool_path }}</span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 卷个数 </div>

                            <div class="profile-info-value">
                                <span class="editable badge badge-success">
                                    {{ storage.pool_volumes }}
                                </span>
                            </div>
                        </div>

                        <div class="profile-info-row">
                            <div class="profile-info-name"> 状态 </div>

                            <div class="profile-info-value">
                                <span class="editable">
                                    {% if storage.pool_active == 1 %}
                                         <span class="label label-success arrowed">on</span>
                                    {% else %}
                                         <span class="label label-danger arrowed-in">off</span>
                                    {% endif %}
                                </span>
                            </div>
                        </div>

                    </div>
                </div>
			<div class="col-sm-8">
			<div class="table-header"></div>		
			<div class="tabbable">
				<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
					<li class="active">
						<a data-toggle="tab" href="#dropdown14">卷列表</a>
					</li>
<!-- 					<li> -->
<!-- 						<a data-toggle="tab" href="#profile4">添加卷</a> -->
<!-- 					</li> -->
				</ul>

				<div class="tab-content">

						<div id="profile4" class="tab-pane">
<!-- 										<p class="center"> -->
<!-- 											<button type="button" class="btn btn-success btn-lg">+添加卷</button> -->
<!-- 										</p>																 -->
						</div>

						<div id="dropdown14" class="tab-pane in active">
                            <div class="widget-toolbox padding-8 clearfix">

                                <button class="btn btn-xs btn-success pull-left" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addVolumeModal">
                                    <i class="icon-arrow-right icon-plus"></i>
                                    <span class="bigger-110">添加卷</span>
                                </button>
                            </div>
                            <div>
                                <table class="table table-striped table-bordered">
                                    <thead>
                                        <tr>
                                            <th class="center">序号</th>
                                            <th class="center">卷名称</th>
                                            <th class="center">类型</th>
                                            <th class="center">容量(GB)</th>
                                            <th class="center">使用容量(GB)</th>
                                            <th class="center">使用率</th>
                                            <th class="hidden-480 center">操作</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        {% for ds in storage.pool_vols %}
                                        <tr>
                                            <td class="center">{{ forloop.counter }}</td>
                                            <td class="center">
                                                <a>{{ ds.vol_name }}</a>
                                            </td>
                                            <td class=" center">
                                                    {{ ds.vol_type}}
                                            </td>
                                            <td class="center">
                                                    {{ ds.vol_size }}
                                            </td>
                                            <td class="center">
                                                    {{ ds.vol_available }}
                                            </td>
                                            <td class="center">

                                                <div class="progress  progress-striped" data-percent="{{ ds.vol_per }}%">
                                                    {% if ds.vol_per > 90  %}
                                                <div class="progress-bar progress-bar-danger" style="width: {{ ds.vol_per }}%;"></div>
                                                    {% elif 70 < ds.vol_per and ds.vol_per < 90 %}
                                                <div class="progress-bar progress-bar-yellow" style="width: {{ ds.vol_per }}%;"></div>
                                                    {% else %}
                                                <div class="progress-bar progress-bar-success" style="width: {{ ds.vol_per }}%;"></div>
                                                {% endif %}
                                            </td>

                                            <td class="center">
                                                <button class="btn btn-primary btn-xs" onclick="onBtnHandleCloneVolume(this,{{vmServer.id}},'{{storage.pool_name}}','{{ds.vol_name}}')">
                                                    克隆
                                                </button>
                                                <button class="btn btn-danger btn-xs" onclick="onBtnHandleVolume(this,{{vmServer.id}},'{{storage.pool_name}}','{{ds.vol_name}}','delete')">
                                                    删除
                                                </button>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            <div class="hr "></div>

                            <div class="row">
                                <div class="col-sm-5 pull-right">
                                    <h4 class="pull-right">
                                        Total Volume:
                                        <span class="red">{{ storage.pool_vols|length }}</span>
                                    </h4>
                                </div>
                                <div class="col-sm-7 pull-left"> 汇总信息 </div>
                            </div>
																
						</div>
				</div>
			</div>
		</div>
		
		
		<div class="modal fade" id="addVolumeModal" tabindex="-1" role="dialog" aria-labelledby="addVolumeModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h4 class="modal-title" id="addVolumeModalLabel">
							{{ storage.pool_name }}新增卷
						</h4>
					</div>

					<div class="modal-body">
						<form class="form-horizontal" id="addVolume">
							<div class="form-group">
								<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email"><strong>卷类型:</strong></label>

								<div class="col-xs-12 col-sm-9">
									<div class="clearfix">
										<select id="vNetwork-select" name="vol_drive">
											<option value="">选择卷类型</option>
											<option value="qcow2">qcow2</option>
											<option value="raw">raw</option>
										</select>
									</div>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>卷名称:</strong></label>

								<div class="col-sm-9">
									<input class="input-sm" type="text" id="form-field-6" placeholder="vm1.img" name="vol_name" />
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="form-field-4"><strong>容量(GB):</strong></label>

								<div class="col-sm-9">
									<input class="input-sm" type="text" id="form-field-6" placeholder="20" name="vol_size" />
								</div>
							</div>
						</form>
					</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" onclick="addVolume(this,{{vmServer.id}},'{{ storage.pool_name }}','add')">
							添加
						</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
	 </div>	

	<script type="text/javascript">
		jQuery(function($) {
            var oldie = /msie\s*(8|7|6)/.test(navigator.userAgent.toLowerCase());
            $('.easy-pie-chart.percentage').each(function(){
                $(this).easyPieChart({
                    barColor: $(this).data('color'),
                    trackColor: '#EEEEEE',
                    scaleColor: false,
                    lineCap: 'butt',
                    lineWidth: 8,
                    animate: oldie ? false : 1000,
                    size:75
                }).css('color', $(this).data('color'));
            });
		});
		
		//添加卷
		function addVolume(obj,server_id,pool_name,op) {
			var server_data = {}
			var required = ['vol_size','vol_name','vol_drive']
			var form = document.getElementById('addVolume');
			for (var i = 0; i < form.length; ++i) {
				var name = form[i].name;
				var value = form[i].value;	
				idx = $.inArray(name, required);						
				if (idx >= 0 && value.length == 0){
					window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
					return false;
				};	
				if ( idx >= 0 && value.length != 0 && name.length != 0 ){						
					server_data[name] = value;
				};					
			};
			server_data['server_id'] = server_id;
			server_data['pool_name'] = pool_name;
			server_data['op'] = op;
			$.ajax({
				dataType: "JSON",
				url:'/handleVolume/', //请求地址
				type:"POST",  //提交类似
				data:server_data,  //提交参数
				success:function(response){
					if (response["code"] == 200){
						window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success,
							{onOk:function(){
								window.location.reload();
							}});
					}
					else {
						window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
					}
					
				},
		    	error:function(response){
		    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
		    	}
			})	
		}		
		
        //删除/克隆卷
	    function onBtnHandleVolume(obj, server_id,pool_name,volume_name,op){
			var btnObj = $(obj);
			if ( op == 'delete'){
				var txt=  "是否确认删除("+ volume_name + ")？"
			}
			else if ( op == 'clone'){
				var txt=  "是否确认克隆("+ volume_name + ")？"
			};
			var option = {
                title: "操作主机("+'{{vmServer.hostname}}'+")",
                btn: parseInt("0011",2),
                onOk: function(){
                    $.ajax({
                        type: 'POST',
                        url: '/handleVolume/',
                        data:{
                            "server_id":server_id,
                            "op":op,
                            "pool_name":pool_name,
                            "vol_name":volume_name,
                        },
                        success:function(response){
                            if (response["code"]=="200"){
                                window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success,
                                    {onOk:function(){
                                        window.location.reload();
                                    }});
                            }
                            else{
                                window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
                            }
                        },
                        error:function(response){
                            window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
                        },
                    });
                },
                onCancel:function(){
                },
                onClose:function(){
                }
            }
			window.wxc.xcConfirm(txt, "custom", option);
		}

        //克隆卷
	    function onBtnHandleCloneVolume(obj, server_id, pool_name, volume_name){
	        layer.prompt({title: '请输入克隆后的卷名称', value: 'clone_'+volume_name, formType: 0}, function(val, index){
                layer.close(index);

                var idx = layer.load(1);

                $.ajax({
                    type: 'POST',
                    url: '/handleVolume/',
                    data:{
                        "server_id":server_id,
                        "op": 'clone',
                        "pool_name": pool_name,
                        "vol_name": volume_name,
                        "new_vol_name": val,
                    },
                    success:function(response){
                        if (response["code"]=="200"){
                            layer.alert(response["msg"], function() {
								layer.closeAll();
								window.location.reload();
							});
                        }
                        else{
                            layer.alert(response["msg"], {icon: 2});
                        }
                    },
                    error:function(response){
                        layer.alert("发生异常", {icon: 2});
                    },
                    complete: function(response){
                        layer.close(idx)
                    }
                });
            });
		}

	</script>
{% endblock %}
